import React, { useEffect, useState } from 'react'
import { Field, NumberKeyboard, hooks } from 'react-vant'
import { Button } from 'react-vant'
import './log.css'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { PasswordInput, Dialog } from 'react-vant';
import axios from 'axios'
export default function Dengone() {

    let [la ] = useSearchParams()


    // 验证码输入框
	const onSubmit = (val) => {
		Dialog.alert({
		  message: val,
		});
	  };

	let [in1,setin1] = useState('')
	

	const [state, set] = hooks.useSetState({
		visible: false,
		value: '',
	  })

	const l = () => {
	    
	}

	let [kong,setkong] = useState(true)
	const tt = (v) => {
	    setin1(v)
		if(v.length==4){
			setkong(false)
		}else{
			setkong(true)
		}
	}

	// 倒计时
	let [num,setnum] = useState(59)
	const dao=()=>{
	    let time = setInterval(() => {
	        setnum(num--)
			console.log(num);
			if(num==0){
				clearInterval(time)
				console.log('12');
				setnum(60)
			}
	    },1000)
	}

	useEffect(() => {

	    // dao()
	},[])

	let ta = useNavigate() // 跳转
	const deng = () => {


	    sessionStorage.setItem('token',123)
		ta('/shou')

		
		
	}
  return (
    <div className='deng-one'>

		<div>
			<div className='deng-title'>登录验证</div>
			<div>
				<img src="../public/login-4.png" className='deng-img1'  alt=" " />
			</div>

			<div className='deng-title12'>
				请输入验证码
			</div>
			<div className='one-phone'>
                {la.get('phone')}
            </div>
		</div>
		

        {/* 验证码输入框 */}
		<div className='deng-kuang'>
			{/* <input type="text"  onChange={()=>l()} name="" id="" onClick={() => set({ visible: true })} /> */}
            <PasswordInput className='one-kuang' gutter={7} onSubmit={onSubmit}
			 length={4} onFocus={() => set({ visible: true })} value={in1}  />
		
		</div>

		{/* 倒计时 */}
		<div className='one-dao'>
			<span className='one-sp1' >重新发送验证码</span>
			<span className='one-sp2'>00:{num} </span>
			
		</div>


        {/* 数字按键 */}
		<div>
            <NumberKeyboard
                // value={state.value}
                value={in1}
                visible={state.visible}
                maxlength={11}
                // onChange={v => setin1({ value: v })}
                onChange={(v)=>tt(v)}
                onBlur={() => set({ visible: false })}
            />
		</div>

		
        {/* 按钮 */}
		<div className={kong?'one-button1':'one-button'}>

			<span onClick={deng} className='one-sp3'>验证</span>
			
		</div>
      
    </div>
  )
}
